$(function () {
    const layer = layui.layer
    const form = layui.form
    const laypage = layui.laypage
    // 美化时间过滤器

    template.defaults.imports.dataFormat = function (date) {
        const dt = new Date(date)
        const y = padZero(dt.getFullYear())
        const m = padZero(dt.getMonth() + 1)
        const d = padZero(dt.getDate())
        const h = padZero(dt.getHours())
        const min = padZero(dt.getMinutes())
        const sec = padZero(dt.getSeconds())
        return `${y} - ${m} - ${d} ${h} : ${min} : ${sec}`
    }
    function padZero() {
        return n > 9 ? n : '0' + n
    }

    const data = {
        pagenum: 1,
        pagesize: 3,
        cate_id: '',
        state: ''
    }
    initTable();
    function initTable() {
        $.ajax({
            method: 'GET',
            url: '/my/article/list',
            data: data,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                if (res.data.length === 0) {
                    layer.msg(res.message)
                }
                const htmlStr = template("tol-table", res)
                $('tbody').html(htmlStr)
                renderPage(res.total)
            }
        })
    }
    // 初始化文章分类
    initCate()

    // 初始化文章分类的方法
    function initCate() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                // 调用模板引擎渲染分类的可选项
                const htmlStr = template('tpl-cate', res)
                // 单词写错 卧槽,心态崩了
                $('[name=cate_id]').html(htmlStr)
                // 通过 layui 重新渲染表单区域的UI结构 
                form.render()
            }
        })
    }
    $('#form-search').on('submit', function (e) {
        e.preventDefault()
        // 获取表单中选中项的值
        var cate_id = $('[name=cate_id]').val()
        var state = $('[name=state]').val()
        // 为查询参数对象 q 中对应的属性赋值
        data.cate_id = cate_id
        data.state = state
        // 根据最新的筛选条件，重新渲染表格的数据
        initTable()
    })

    // 定义渲染分页的方法
    function renderPage(value) {
        laypage.render({
            // 放置分页表格的盒子
            elem: 'pageBox',
            // 数据总数
            count: value,
            // 每一页的个数
            limit: data.pagesize,
            // 起始页
            curr: data.pagenum,
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 3, 5, 8, 10],
            // 分页触发回调
            // 触发方式:
            // 1.点击页码(first == undefined)
            // 2.调用laypage.render方法就会触发(first == true)
            jump: function (obj, first) {
                // 把最新页码值赋值到分页数据中
                data.pagenum = obj.curr;
                data.pagesize = obj.limit
                if (!first) {
                    initTable()
                }
            }
        })
    }
    // 删除
    $('tbody').on('click', '#btn-del', function () {
        const id = $(this).attr('data-id')
        layer.confirm('是否确认删除?', { icon: 3, title: '提示' }, function (index) {
            $.ajax({
                type: 'GET',
                url: `/my/article/delete/${id}`,
                success: function (res) {
                    if (res.status !== 0) {
                        return layer.msg(res.message)
                    }
                    layer.msg(res.message)
                    const len = $("#btn-del").length
                    if (len == 1 && data.pagenum > 1) {
                        data.pagenum -= 1
                    }
                    initTable()
                }
            })
            layer.close(index);
        });
    })

    //修改
    let coverimg = ''
    let indexRevise = null
    $('body').on('click', '#edit', function () {
        indexRevise = layer.open({
            type: 1,
            area: ['500px', '400px'],
            title: '添加文章分类',
            content: $('#dialog-revise').html()
        });
        const id = $(this).attr('data-id')
        $.ajax({
            type: 'GET',
            url: `/my/article/${id}`,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                form.val('form-revise', res.data)
                const fd = new FormData($('#form-revise')[0])
                $('#image').attr('src', `http://api-breakingnews-web.itheima.net${res.data.cover_img}`)
                const $image = $('#image')
                const options = {
                    aspectRatio: 400 / 280,
                    preview: '.img-preview'
                }
                // 3. 初始化裁剪区域
                $image.cropper(options)
                $('body').on('change', '#coverFile', function (e) {
                    const file = e.target.files[0]
                    const newImgURL = URL.createObjectURL(file)
                    $image
                        .cropper('destroy')      // 销毁旧的裁剪区域
                        .attr('src', newImgURL)  // 重新设置图片路径
                        .cropper(options)
                })
                $('body').on('submit', '#form-revise', function (e) {
                    e.preventDefault();
                    $image
                        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                            width: 400,
                            height: 280
                        })
                        .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                            // 得到文件对象后，进行后续的操作
                            fd.append('cover_img', blob)
                            change(fd);
                        })
                })

            }
        })
    })
    $('body').on('click', '#btnChooseImage', function () {
        $('#coverFile').click();

    })
    function change(fd) {
        $.ajax({
            method: 'POST',
            url: `/my/article/edit`,
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg(res.message)
                layer.close(indexRevise)
                initTable();
            }
        })

    }

})